<template>
  <div id="app">
    <div class="withdrawBox">
    <div class="bank">
      <span>到账银行</span>
      <div>
        <p>平安银行</p>
        <p>(6285***********9665)</p>
      </div>
    </div>
    <h4>提现金额</h4>
    <div class="withdraw">
      <b>￥</b>
      <input type="text" placeholder="单笔最高可提现金额3万">
    </div>
    <p class="current">当前可提现 ¥25,698,456.565，手续费 (¥0.00)</p>
    <router-link to="/" class="btn">提现</router-link>
    </div>
    <div class="mask" v-show="false">
      <div>
        <h1>输入支付密码</h1>
        <input type="password" placeholder="请输入支付密码"  id="pay-password">
        <a>忘记密码</a>
        <ul>
          <li>取消</li>
          <li class="baseColor">确定</li>
        </ul>
      </div>
    </div>
    <footers :navIndex="1"></footers>
  </div>
</template>

<script>
  import footers from '../../commonList/Footer.vue'
  export default {
    name: "withdraw",
    components: {
      footers
    },
    beforeCreate() {
      document.querySelector('body').setAttribute('style', 'background-color:#f3f3f3')
    },
    beforeDestroy() {
      document.querySelector('body').removeAttribute('style')
    }
  }
</script>

<style lang="less" scoped>
  #app {
    .withdrawBox{
      background: #fff;
      margin: 0.5rem;
      padding: 0.96rem 1.2rem;
    .bank {
      display: flex;
      font-size: 0.597rem;
      span {
        flex: 2.5;
      }
      div {
        flex: 7.5;
        p:nth-of-type(2) {
          color: #646464;
        }
      }
    }
    h4 {
      font-size: 0.597rem;
      font-weight: normal;
      margin: 1rem 0 0.5rem;
    }
    .withdraw {
      border-bottom: 1px solid #d9d9d9;
      display: flex;
      padding: 0.93rem 0;
      b {
        flex: 1.3;
        font-size: 1.28rem;
        margin-top: -0.5rem;
      }
      input {
        flex: 8.7;
        border: 0;
        outline: none;
        font-size: 0.7rem;
      }
    }
    .current {
      font-size: 0.554rem;
      margin: 0.74rem 0;
    }
    .mask {
      position: fixed;
      top: 0;
      left: 0;
      background: rgba(0,0,0,.5);
      width: 100%;
      height: 100%;
      div {
        background: #fff;
        width: 12rem;
        height: 7.5rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        padding-top: 0.3rem;
        border-radius: 10px;
        h1 {
          text-align: center;
          font-size: 0.725rem;
          line-height: 2rem;
          font-weight: 400;
        }
        input {
          width: 80%;
          height: 1.5rem;
          border: 1px solid #808080;
          margin: 0 auto;
          box-sizing: border-box;
          display: block;
          padding-left: 0.5rem;
          outline: none;
        }
        a {
          display: block;
          text-align: center;
          font-size: 0.55rem;
          color: #737373;
          line-height: 2rem;
        }
      }
      ul {
        border-top: 1px solid #c6c6c6;
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 2rem;
        display: flex;
        li {
          flex: 1;
          text-align: center;
          line-height: 2rem;
          font-size: 0.64rem;
          box-sizing: border-box;
          &:nth-of-type(2){
            border-left: 1px solid #c6c6c6 ;
          }
        }
      }
    }
  }
  }
</style>
